﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Dashboard_RendimientoSOA.aspx.cs" Inherits="SOA_AnalisisSOA_Dashboard_RendimientoSOA" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void ReloadData(object sender, DirectEventArgs e)
        {
            Store store = this.Chart1.GetStore();
            store.DataSource = ObtenerDatos_AuditoriasSegunTipo();
            store.DataBind();
        }
    </script>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">


    <script type="text/javascript">
        if (window.dialogArguments) {
            window.opener = window.dialogArguments;
        }
        function tipRenderer(storeItem, item) {
            //calculate percentage.
            var total = 0;

            App.Chart1.getStore().each(function (rec) {
                total += rec.get('Dato1');
            });

            this.setTitle(storeItem.get('Nombre') + ': ' + Math.round(storeItem.get('Dato1') / total * 100) + '%');
        }

        function saveChart(btn) {
            Ext.MessageBox.confirm('Confirmar Descarga', '¿Seguro de descargar gráfico?', function (choice) {
                if (choice == 'yes') {
                    btn.up('panel').down('chart').save({
                        type: 'image/png'
                    });
                }
            });
        }

    </script>
 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

    </ContentTemplate>
</asp:UpdatePanel>

<div id="contenedor900">

    <table border = "0" cellpadding = "0" cellspacing = "0" style="width:100%">
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text=":: Dashboard - Rendimiento Sociedad de Auditoría"  SkinID="labelsubTituloSkin"></asp:Label>            
            </td>
        </tr>
        <tr>
            <td style="height:10px"></td>
        </tr>
    </table>
        <table border = "0" cellpadding = "0" cellspacing = "0" style="width:100%">
        <tr>
            <td>
                <asp:Panel ID="Panel6" runat="server" SkinID="panelSkin">
                <table border = "0" cellpadding = "2" cellspacing = "0" style="width:100%">
                    <tr><td  style="height:10px" colspan="6"></td></tr>
                    <tr>
                        <td style="width:10px"></td>
                        <td style="width:120px">
                            <asp:Label ID="Label4" runat="server" Text="Sociedad de Auditoría" SkinID="labelTextSkin"></asp:Label>
                        </td>
                        <td style="width:500px">                            
                            <asp:TextBox ID="txtSociedad" runat="server" SkinID="CajaTextoSkin" 
                                Width="500px" Height="20px"></asp:TextBox></td>
                        <td style="width:10px"></td>
                        <td >
                            <asp:Button ID="btnMostrar" runat="server" Text="Mostrar" /></td>
                        <td ></td>
                    </tr>
                    <tr><td  style="height:10px" colspan="6"></td></tr>
                </table>
                </asp:Panel>
            </td>       
        </tr>
        <tr><td style="height:10px"></td>
        </tr>
        </table>

        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
        <table border = "0" cellpadding = "0" cellspacing = "0" style="width:100%">
            <tr>
                <td>
        <!-- Grafico 01 -->
            <ext:Panel ID="Panel1"
                runat="server"
                Width="400"
                Height="250"
                Title="Según Tipo de Auditoría"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button1" 
                                runat="server" 
                                Text="Reload Data" 
                                Icon="ArrowRefresh" 
                                OnDirectClick="ReloadData" 
                                />
                            <ext:Button ID="Button2" runat="server" Text="Donut" EnableToggle="true">
                                <Listeners>
                                    <Toggle Handler="#{Chart1}.series.first().donut = pressed ? 35 : false;#{Chart1}.refresh();" />
                                </Listeners>
                            </ext:Button>

                            <ext:Button ID="Button3" 
                                runat="server" 
                                Text="Save Chart" 
                                Icon="Disk"
                                Handler="saveChart"
                                />
                        </Items>
                    </ext:Toolbar>
                </TopBar>

                <Items>

                <ext:Chart
                    ID="Chart1" 
                    runat="server"
                    Animate="true"
                    Shadow="true"
                    InsetPadding="10"
                    Theme="Base:gradients">
                    <LegendConfig Position="Right" />
                    <Store>
                        <ext:Store ID="Store1" 
                            runat="server" 
                            Data="<%# ObtenerDatos_AuditoriasSegunTipo() %>" 
                            AutoDataBind="true">                           
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Nombre" />
                                        <ext:ModelField Name="Dato1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Series>
                        <ext:PieSeries 
                            AngleField="Dato1" 
                            ShowInLegend="true" 
                            Donut="20" 
                            Highlight="true" 
                            HighlightSegmentMargin="10">
                            <Label Field="Nombre" Display="Rotate" Contrast="true" Font="10px Arial" />
                            <Tips TrackMouse="true" Width="140" Height="28">
                                <Renderer Fn="tipRenderer" />
                            </Tips>
                        </ext:PieSeries>
                    </Series>
                </ext:Chart>


              </Items>
            </ext:Panel>                
                </td> 
                <td style="width:10px">                
                </td> 
                <td>

        <!-- Grafico 02 -->
            <ext:Panel ID="Panel2"
                runat="server"
                Width="400"
                Height="250"
                Title="Según Estado de Acción de Control"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar ID="Toolbar2" runat="server">
                        <Items>
                            <ext:Button ID="Button4" 
                                runat="server" 
                                Text="Reload Data" 
                                Icon="ArrowRefresh" 
                                OnDirectClick="ReloadData" 
                                />
                            <ext:Button ID="Button5" runat="server" Text="Donut" EnableToggle="true">
                                <Listeners>
                                    <Toggle Handler="#{Chart1}.series.first().donut = pressed ? 35 : false;#{Chart1}.refresh();" />
                                </Listeners>
                            </ext:Button>

                            <ext:Button ID="Button6" 
                                runat="server" 
                                Text="Save Chart" 
                                Icon="Disk"
                                Handler="saveChart"
                                />
                        </Items>
                    </ext:Toolbar>
                </TopBar>

                <Items>

                <ext:Chart
                    ID="Chart2" 
                    runat="server"
                    Animate="true"
                    Shadow="true"
                    InsetPadding="10"
                    Theme="Base:gradients">
                    <LegendConfig Position="Right" />
                    <Store>
                        <ext:Store ID="Store2" 
                            runat="server" 
                            Data="<%# ObtenerDatos_AuditoriasSegunEstado() %>" 
                            AutoDataBind="true">                           
                            <Model>
                                <ext:Model ID="Model2" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Nombre" />
                                        <ext:ModelField Name="Dato1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Series>
                        <ext:PieSeries 
                            AngleField="Dato1" 
                            ShowInLegend="true" 
                            Donut="20" 
                            Highlight="true" 
                            HighlightSegmentMargin="10">
                            <Label Field="Nombre" Display="Rotate" Contrast="true" Font="10px Arial" />
                            <Tips TrackMouse="true" Width="140" Height="28">
                                <Renderer Fn="tipRenderer" />
                            </Tips>
                        </ext:PieSeries>
                    </Series>
                </ext:Chart>

              </Items>
            </ext:Panel>                
                </td>                                                
            </tr>
            <tr><td colspan="3" style="height:10px"></td></tr>
            <tr>
                <td>
        <!-- Grafico 03 -->
            <ext:Panel ID="Panel3"
                runat="server"
                Width="400"
                Height="250"
                Title="Acciones Pendientes de Emitir Informe"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar ID="Toolbar3" runat="server">
                        <Items>
                            <ext:Button ID="Button7" 
                                runat="server" 
                                Text="Reload Data" 
                                Icon="ArrowRefresh" 
                                OnDirectClick="ReloadData" 
                                />
                            <ext:Button ID="Button8" runat="server" Text="Donut" EnableToggle="true">
                                <Listeners>
                                    <Toggle Handler="#{Chart1}.series.first().donut = pressed ? 35 : false;#{Chart1}.refresh();" />
                                </Listeners>
                            </ext:Button>

                            <ext:Button ID="Button9" 
                                runat="server" 
                                Text="Save Chart" 
                                Icon="Disk"
                                Handler="saveChart"
                                />
                        </Items>
                    </ext:Toolbar>
                </TopBar>

                <Items>

                <ext:Chart
                    ID="Chart3" 
                    runat="server"
                    Animate="true"
                    Shadow="true"
                    InsetPadding="10"
                    Theme="Base:gradients">
                    <LegendConfig Position="Right" />
                    <Store>
                        <ext:Store ID="Store3" 
                            runat="server" 
                            Data="<%# ObtenerDatos_AccionesPendienteInformes() %>" 
                            AutoDataBind="true">                           
                            <Model>
                                <ext:Model ID="Model3" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Nombre" />
                                        <ext:ModelField Name="Dato1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Series>
                        <ext:PieSeries 
                            AngleField="Dato1" 
                            ShowInLegend="true" 
                            Donut="20" 
                            Highlight="true" 
                            HighlightSegmentMargin="10">
                            <Label Field="Nombre" Display="Rotate" Contrast="true" Font="10px Arial" />
                            <Tips TrackMouse="true" Width="140" Height="28">
                                <Renderer Fn="tipRenderer" />
                            </Tips>
                        </ext:PieSeries>
                    </Series>
                </ext:Chart>


              </Items>
            </ext:Panel>                
                </td> 
                <td style="width:10px">                
                </td> 
                <td>

        <!-- Grafico 04 -->
            <ext:Panel ID="Panel4"
                runat="server"
                Width="400"
                Height="250"
                Title="Acciones Emitidas Últimos Años"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar ID="Toolbar4" runat="server">
                        <Items>
                            <ext:Button ID="Button10" 
                                runat="server" 
                                Text="Reload Data" 
                                Icon="ArrowRefresh" 
                                OnDirectClick="ReloadData" 
                                />
                            <ext:Button ID="Button11" runat="server" Text="Donut" EnableToggle="true">
                                <Listeners>
                                    <Toggle Handler="#{Chart1}.series.first().donut = pressed ? 35 : false;#{Chart1}.refresh();" />
                                </Listeners>
                            </ext:Button>

                            <ext:Button ID="Button12" 
                                runat="server" 
                                Text="Save Chart" 
                                Icon="Disk"
                                Handler="saveChart"
                                />
                        </Items>
                    </ext:Toolbar>
                </TopBar>

                <Items>

                 <ext:Chart 
                    ID="Chart4" 
                    runat="server"
                    Shadow="true"
                    StyleSpec="background:#fff"
                    Animate="true">
                    <Store>
                        <ext:Store ID="Store4" 
                            runat="server" 
                            Data="<%# ObtenerDatos_AccionesAsignadasUltAnios(6) %>" 
                            AutoDataBind="true">                           
                            <Model>
                                <ext:Model ID="Model4" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Nombre" />
                                        <ext:ModelField Name="Dato1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>

                    <Axes>
                        <ext:NumericAxis                             
                            Fields="Dato1"                            
                            Grid="true"
                            Title="Porcentaje"
                            Minimum="0">
                            <Label FontSize="8px">
                                <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                            </Label>
                        </ext:NumericAxis>                            

                        <ext:CategoryAxis 
                            Position="Bottom"
                            Fields="Nombre"
                            Title="Años"
                            />                            
                    </Axes>
                    <Series>
                        <ext:ColumnSeries 
                            Axis="Left"
                            Highlight="true" 
                            XField="Nombre" 
                            YField="Dato1">
                            <Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="28">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));" />
                            </Tips>
                            <Label
                                Display="InsideEnd" 
                                Field="Dato1" 
                                Orientation="Horizontal" 
                                Color="#333" 
                                TextAnchor="middle" FontSize="10px">
                                <Renderer Handler="return Ext.util.Format.number(value, '0');" />
                            </Label>
                        </ext:ColumnSeries>
                    </Series>
                </ext:Chart>

              </Items>
            </ext:Panel>                
                </td>                                                
            </tr>
            <tr><td colspan="3" style="height:10px"></td></tr>
            <tr><td colspan="3">

        <!-- Grafico 05 -->
            <ext:Panel ID="Panel5"
                runat="server"
                Width="840"
                Height="340"
                Title="Cumplimiento de Meta"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar ID="Toolbar5" runat="server">
                        <Items>
                            <ext:Button ID="Button13" 
                                runat="server" 
                                Text="Reload Data" 
                                Icon="ArrowRefresh" 
                                OnDirectClick="ReloadData" 
                                />
                            <ext:Button ID="Button14" runat="server" Text="Donut" EnableToggle="true">
                                <Listeners>
                                    <Toggle Handler="#{Chart1}.series.first().donut = pressed ? 35 : false;#{Chart1}.refresh();" />
                                </Listeners>
                            </ext:Button>

                            <ext:Button ID="Button15" 
                                runat="server" 
                                Text="Save Chart" 
                                Icon="Disk"
                                Handler="saveChart"
                                />
                        </Items>
                    </ext:Toolbar>
                </TopBar>

                <Items>

                 <ext:Chart 
                    ID="Chart5" 
                    runat="server"
                    StyleSpec="background:#fff;"                   
                    Shadow="true"
                    StandardTheme="Category1"
                    Animate="true">
                    <LegendConfig Position="Right" />
                    <Store>
                        <ext:Store ID="Store5" 
                            runat="server" 
                            Data="<%# ObtenerDatos_CumplimientoMetaUltAnios(10) %>" 
                            AutoDataBind="true">                           
                            <Model>
                                <ext:Model ID="Model5" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Nombre" />
                                        <ext:ModelField Name="Dato1" />
                                        <ext:ModelField Name="Dato2" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis                             
                            Fields="Dato1,Dato2"
                            Title="Metas"
                            MinorTickSteps="1"
                            Minimum="0">
                            <GridConfig>
                                <Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
                            </GridConfig>
                        </ext:NumericAxis>                            

                        <ext:CategoryAxis 
                            Position="Bottom"
                            Fields="Nombre"
                            Title="Meses del Año"
                            />                            
                    </Axes>
                    <Series>
                        <ext:LineSeries Axis="Left" XField="Nombre" YField="Dato1" Titles="Planificación">
                            <HighlightConfig Size="7" Radius="7" />
                            <MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
                        </ext:LineSeries>

                        <ext:LineSeries Axis="Left" Smooth="3" XField="Nombre" YField="Dato2" Titles="Ejecución">
                            <HighlightConfig Size="7" Radius="7" />
                            <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                        </ext:LineSeries>

                    </Series>
                </ext:Chart>

              </Items>
            </ext:Panel>       

            </td></tr>
        </table>

    <table border = "0" cellpadding = "0" cellspacing = "0" style="width:100%">
        <tr>
            <td style="height:200px"></td>
        </tr>
    </table>
</div>

</asp:Content>

